<template>
  <div class="container">
    <a-space direction="vertical" style="width: 100%" :size="16">
      <a-card style="width: 100%" title="会员特权配置">
        <a-form :model="formState">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="特权名称">
                <a-input
                  style="width: 100%"
                  v-model:value="formState.name"
                  placeholder="输入特权名称"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="状态">
                <a-select
                  ref="select"
                  v-model:value="formState.state"
                  style="width: 100%"
                  placeholder="状态"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option :value="1">启用</a-select-option>
                  <a-select-option :value="2">禁用</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="创建时间">
                <a-range-picker
                  v-model:value="datePicker"
                  @change="handleDateChange"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <div class="layout-flexSpace">
          <a-space wrap>
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </a-space>
          <a-space wrap>
            <a-button type="primary" @click="handelAdd()">新增特权</a-button>
            <a-button type="primary" @click="handleExport">导出</a-button>
          </a-space>
        </div>
      </a-card>

      <a-card>
        <a-table
          :dataSource="dataSource"
          :columns="notifyColumns"
          :pagination="pagination"
          @change="handleChangeSize"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'coverPic'">
              <img class="cover-pic" :src="record.coverPic" alt="" />
            </template>
            <template v-if="column.key === 'introImg'">
              <img class="cover-pic" :src="record.introImg" alt="" />
            </template>
            <template v-if="column.key === 'type'">
              <p class="type-p">
                {{ memberEquitiesState.getNameByValue(record.type) }}
              </p>
            </template>
            <template v-if="column.key === 'state'">
              <a-switch
                :disabled="true"
                :checked="record.state === 1 ? true : false"
                checked-children="启用"
                un-checked-children="禁用"
              />
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button @click="handelAdd(record)">编辑</a-button>
                <a-popconfirm
                  :title="`是否确认${stateEnum.getNameByValue(record.state)}`"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="handleChangeState(record)"
                >
                  <a-button type="primary">{{
                    stateEnum.getNameByValue(record.state)
                  }}</a-button>
                </a-popconfirm>
                <a-popconfirm
                  title="是否确认删除?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="handleDel(record.id)"
                >
                  <a-button type="primary" danger>删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-space>
    <memberInterests
      ref="interestsRef"
      @queryVipRightsList="queryVipRightsList"
    />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { notifyColumns } from "./columns.js";
import stateEnum from "@/enums/stateEnum.js";
import memberEquitiesState from "@/enums/memberEquitiesState.js";
import memberInterests from "./addModule/memberInterests.vue";
import {
  queryVipRights,
  exportVipRights,
  removeVipRights,
  saveVipRights,
} from "@/api/member";
import { exporeFile } from "@/utils/exporeFile";
import { message } from "ant-design-vue";
const pagination = ref({
  current: 1,
  pageSize: 10,
  defaultPageSize: 10,
  total: 0,
  showSizeChanger: true,
  pageSizeOptions: ["10", "20", "50", "100"],
  showTotal: (total) => `共 ${total} 条`,
});
const formState = ref({
  page: pagination.value.current,
  pageSize: pagination.value.pageSize,
  name: null,
  state: 0,
});
const interestsRef = ref(null);
const dataSource = ref([]);
// 获取权益列表
const queryVipRightsList = async () => {
  const { data } = await queryVipRights(formState.value);
  console.log("获取权益列表", data);
  dataSource.value = data.list;
  pagination.value.total = data.total;
};
function handleSearch() {
  formState.value.page = 1
  formState.value.pageSize = 10
  queryVipRightsList();
}
const handelAdd = (item = null) => {
  interestsRef.value.open(item);
};
// 创建时间
const datePicker = ref(null);
function handleDateChange(date, dateString) {
  datePicker.value = date;
  formState.value.startTime = dateString[0];
  formState.value.endTime = dateString[1];
}
function handleReset() {
  datePicker.value = null;
  formState.value = {
    page: 1,
    pageSize: 10,
    name: undefined,
    state: 0,
  };
  pagination.value.current = 1
  pagination.value.pageSize = 10
  queryVipRightsList();
}
// 导出
const handleExport = async () => {
  const data = await exportVipRights(formState.value);
  console.log(data);
  exporeFile("会员特权配置列表.xls", data);
};
// 删除
const handleDel = async (id) => {
  const { data } = await removeVipRights({ id });
  if (data.code === 200) {
    message.info("删除成功！");
    queryVipRightsList();
  }
};
//启用 禁用
const handleChangeState = async (record) => {
  const formState = record;
  formState.state = record.state === 1 ? 2 : 1;
  const { data } = await saveVipRights(formState);
  if (data.code === 200) {
    message.info("成功！");
    queryVipRightsList();
  }
};
function handleChangeSize(page) {
  console.log("页码改变", page);
  formState.value.page = page.current;
  formState.value.pageSize = page.pageSize;
  pagination.value.current = page.current;
  pagination.value.pageSize = page.pageSize;
  queryVipRightsList();
}

onMounted(() => {
  queryVipRightsList();
});
</script>
<style lang="less">
.img-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  .img-label {
    margin-top: 6px;
    color: #9599a5;
    font-size: 12px;
  }
}
.cover-pic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.type-p {
  margin: 0;
}
</style>
